<template>
  <div id="item-cell">
    <div class="cell" :title="item[titleField]" :class="{'cell-check': value === item[valueField]}"
      v-for="item in datas" @click="check($event,item)" :key="item[valueField]" v-show="item[show]==='1'">
      <div class=" op" style="position: absolute; top: -25px; right: -5px; color: #FF4949;"
        @click="remove($event, item)">
        <i class="el-icon-circle-cross"></i>
      </div>
      <input type="text" v-model="item[labelField]" value="item[labelField]"
        style="max-width: 120px;text-align: center;border:none;" @blur="edittext(item)" />
      <!--{{item[labelField]}}-->
      <i style="color:red;padding-right:5px;" v-if="item[faltPrice]">¥{{item[faltPrice]}}</i>
    </div>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil';
  export default {
    name: 'item-cell',
    data: function () {
      return {
        msg: '',
        value: null,
      }
    },
    props: {
      datas: {
        type: Array,
        required: true
      },
      labelField: {
        type: [String, Number],
        default: function () {
          return "label";
        }
      },
      valueField: {
        type: [String, Number],
        default: function () {
          return "value";
        }
      },
      show: {
        type: [String, Number],
        default: function () {
          return "showStr";
        }
      },
      titleField: {
        type: String,
        default: function () {
          return "title";
        }
      },
      faltPrice: {
        type: [Number, String],
        default: function () {
          return "price";
        }
      }
    },
    methods: {
      check(e, item) {
        this.value = item[this.valueField];
        this.$emit("change", item);
      },
      remove(e, item) {
        e.stopPropagation();
        this.$emit("remove", item);
      },
      edittext(item) {
        if (item[this.valueField] !== null && item[this.valueField] !== "" && typeof item[this.valueField] !==
          "undefined") {
          this.$emit("blur", item);
        } else {
          console.log(item[this.valueField]);
        }
      }
    }
  }

</script>

<style scoped="scoped">
  .cell {
    position: relative;
    border: 1px solid #1D8CE0;
    height: 50px;
    line-height: 50px;
    min-width: 80px;
    text-align: center;
    margin-right: 5px;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 5px;
  }

  .op {
    display: none;
  }

  .cell:hover .op {
    display: block;
  }

  .cell-check {
    background: #1D8CE0;
  }

  .cell-check input {
    background-color: #1D8CE0;
    color: #FFF;
  }

  /*.cell-check input:focus{background-color: #FFFFFF; color: #000;}*/

</style>
